<template>
  <!-- newsListRef用于添加滚动事件 -->
  <div class="news-list" :style="{'top':'.'+top+'rem'}" ref="newsListRef">
    <template v-for="(item) of newsData">
      <!-- 根据图片数量加载不同的组件模板 -->
      <news-item-0 v-if="!item.thumbnail_pic_s" :item="item" :key="item.uniquekey" :pageFrom="pageFrom"></news-item-0>
      <news-item-1 v-else-if="!item.thumbnail_pic_s02" :item="item" :key="item.uniquekey" :pageFrom="pageFrom"></news-item-1>
      <news-item-2 v-else-if="!item.thumbnail_pic_s03" :item="item" :key="item.uniquekey" :pageFrom="pageFrom"></news-item-2>
      <news-item-3 v-else :item="item" :key="item.uniquekey" :pageFrom="pageFrom"></news-item-3>
    </template>
    <loading v-if="isLoading"></loading>
    <no-more v-if="!hasMore"></no-more>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from "vue";
import { RouteLocationNormalizedLoaded, useRoute } from "vue-router";
import { useStore } from "vuex";
import { useLoadingMore } from "../../compositions";
import { INewsInfo } from "../../typings";
import { SET_NEWS_LIST } from "../../store/home/actionTypes";

import NewsItem0 from "./Item0.vue";
import NewsItem1 from "./Item1.vue";
import NewsItem2 from "./Item2.vue";
import NewsItem3 from "./Item3.vue";
import Loading from "../Loading/index.vue";
import NoMore from "../NoMore/index.vue";

export default defineComponent({
  name: "NewsList",
  components: {
    NewsItem0,
    NewsItem1,
    NewsItem2,
    NewsItem3,
    Loading,
    NoMore,
  },
  props: {
    newsData: Array as PropType<INewsInfo[]>,
    top: Number,
  },
  setup() {
    const store = useStore();
    const pageFrom = ref<string>("");
    //挂载标签里是元素.挂载到组件是组件实例
    const newsListRef = ref<null | HTMLElement>(null);
    const route: RouteLocationNormalizedLoaded = useRoute();

    //滚动新闻列表页面到底部时触发加载更多
    const { isLoading, hasMore } = useLoadingMore(
      store,
      "home",
      SET_NEWS_LIST,
      newsListRef
    );

    //路由名称为pageFrom
    //pageFrom是为了告诉详情页,在哪里去获取当前新闻的详情 '/detail/:uniquekey/:pagefrom'
    //http://localhost:8080/detail/b5d48c26d95cf5a780b3f65d5934523b/Home
    //如果是Home，就去取state的值, 如果是mynews 就去localstorage里找newsList
    pageFrom.value = route.name as string;

    return { pageFrom, newsListRef, isLoading, hasMore };
  },
});
</script>

<style lang="scss">
.news-list {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  background-color: #fff;
  overflow-y: auto;

  .news-item {
    padding: 0.1rem 0.1rem 0;
    box-sizing: border-box;

    img {
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.3s linear;
    }

    .title {
      padding: 0.05rem 0;
      line-height: 0.2rem;

      h1 {
        font-size: 0.16rem;
      }
    }

    &.type-0 {
      h1 {
        font-size: 0.16rem;
      }
      .info {
        padding-top: 0.2rem;
      }
    }

    &.type-1 {
      .main {
        display: flex;
        flex-direction: row;

        .pic {
          flex: 1;
          background-color: #eee;
          box-sizing: border-box;
        }

        .title {
          flex: 2;
          padding-right: 0.1rem;
          box-sizing: border-box;
        }
      }
    }

    &.type-2,
    &.type-3 {
      .pic {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .img {
          width: 33.33%;
          flex: 1 1 auto;
          margin-right: 0.05rem;
          background-color: #eee;
          font-size: 0;

          &.last {
            margin: 0;
          }
        }
      }
    }

    .info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 0.25rem;
      color: #999;
      border-bottom: 0.01rem solid #ededed;
      font-size: 0.12rem;

      .author {
        margin-right: 0.1rem;
      }
    }
  }
}
</style>